<template>
    <div class="custom__dialog">
        <hsa-dialog v-model:visible="dialogVisible" title="新增" width="500">
            <el-form label-width="100">
                <el-form-item label="数据源名称">
                    <el-input v-model="formData.dataSourceName" />
                </el-form-item>
                <el-form-item label="数据源说明">
                    <el-input v-model="formData.dataSourceDesc" type="textarea" :rows="5" placeholder="填写说明" />
                </el-form-item>
                <el-form-item v-model="formData.driverType" label="驱动类型">
                    <el-input />
                </el-form-item>
                <el-form-item v-model="formData.dataSourceIp" label="数据源IP">
                    <el-input />
                </el-form-item>
                <el-form-item v-model="formData.port" label="端口">
                    <el-input />
                </el-form-item>
                <el-form-item v-model="formData.userName" label="用户名">
                    <el-input />
                </el-form-item>
                <el-form-item v-model="formData.password" label="密码">
                    <el-input />
                </el-form-item>
            </el-form>

            <!-- 按钮 -->
            <template #footer>
                <el-button type="default">取 消</el-button>
                <el-button type="primary">连接测试</el-button>
                <el-button type="primary">确 认</el-button>
            </template>
        </hsa-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'

    // API
    import { ApiDataPreparation, dataPreparationAdd } from '~api/DataPreparation'

    // 事件定义
    const emit = defineEmits(['success', 'cancel'])

    const formData = reactive({
        ...dataPreparationAdd()
    })

    // 双向绑定处理
    const dialogVisible = ref(false)

    // 打开弹窗
    const open = () => {
        dialogVisible.value = true

    }

    // 关闭弹窗
    const close = () => {
        dialogVisible.value = false
    }

    defineExpose({
        open,
        close
    })

</script>

<style lang="scss" scoped>
    .custom__dialog {
        height: 0 !important;

        ::v-deep(.hsa-dialog) {

            // 说明布局
            .el-textarea {
                width: 100%;

                // textarea {
                //     resize: none;
                // }
            }
        }
    }
</style>